<template>
  <transition name="kxui-Popup-vue-show">
    <div class="kxui-Popup-vue" v-if="show">
      <div class="kxui-Popup-vue-box" ref="box">
        <div class="kxui-Popup-vue-title" ref="title">
          <p>{{title}}</p>
          <i class="kxui-icon kxui-icon-close" @click="operating(null, null)"></i>
        </div>
        <div class="kxui-Popup-vue-content" :class="{'kxui-Popup-vue-content-noBtn': !btnShow}" ref="content">
          <slot></slot>
        </div>
        <div class="kxui-Popup-vue-event" v-if="btnShow">
          <div v-for="(item, index) in btnGroup" :key="index" @click="operating(item, index)" :class="`kxui-Popup-vue-event-${item.type}`">{{item.name}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      kxui: '',
      info: ''
    }
  },
  model: {
    prop: 'show',
    event: 'autoModel'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    btnGroup: {
      type: Array,
      default: () => {
        return [{
          'name': '确定',
          'type': 'primary'
        }, {
          'name': '取消'
        }]
      }
    },
    btnShow: {
      type: Boolean,
      default: true
    },
    btnClose: {
      type: Boolean,
      default: true
    },
    btnCall: {
      type: Function,
      default: () => {}
    }
  },
  methods: {

    /**
     * 初始化
     * @method init
     * @for watch
     */
    init () {
      const boxWidth = this.$refs.box.offsetWidth
      const autoHeight = (this.$refs.content.offsetHeight + (this.btnShow ? 100 : 40))

      // 位置确定及高度最大值设定
      this.$refs.box.style.left = ((this.info.size.cDocW / 2) - boxWidth / 2) + 'px'
      if (autoHeight >= this.info.size.cDocH - 120) {
        this.$refs.content.style.height = (this.info.size.cDocH - 120 - (this.btnShow ? 100 : 40)) + 'px'
      } else {
        this.$refs.box.style.top = ((this.info.size.cDocH / 2) - autoHeight / 2) - 50 + 'px'
      }

      // 判断是否存在依赖组件，进行行为动作注册
      if (this.kxui.method) { this.kxui.method.drag(this.$refs.title, this.$refs.box) }
    },

    /**
     * 关闭弹出层
     * @method operating
     * @for dom
     */
    operating (item, index) {
      if ((!index && !item) || this.btnClose) { this.$emit('autoModel', this.false) }
      this.btnCall(item, index)
    }
  },
  watch: {
    'show' () {
      const that = this
      if (that.show) {
        that.kxui = window.kxui
        that.info = that.kxui.info()
        that.$nextTick(() => { that.init() })
      }
    }
  }
}
</script>
